<script setup lang="ts">

import {reactive, ref, watch} from "vue"
import formComponents from '@/components/form-component/index.vue'
import {FormDataDto} from '@/components/form-component/type'

const emits = defineEmits(['update:show'])
const props = defineProps({
    show: {
        type: Boolean,
        default: false
    }
})
const formComponentsRef = ref()
const formValue = ref({
    price: '',
    payMode: ''
})
const formData = reactive<FormDataDto>({
    span: 24,
    labelWidth: 100,
    inline: false,
    labelPosition: 'left',
    hideRequiredAsterisk: false,
    requireAsteriskPosition: 'left',
    list: {
        price: {
            span: 24,
            label: '充值金额',
            placeholder: '请输入充值金额',
            type: 'input',
            prop: 'price',
            required: true,
            rules: [
                {
                    required: true,
                    message: '请输入充值金额',
                    trigger: 'blur'
                }
            ]
        },
        payMode: {
            span: 24,
            label: '充值方式',
            placeholder: '请选择充值方式',
            type: 'select',
            prop: 'payMode',
            required: true,
            options: [
                {
                    label: '支付宝',
                    value: 'alipay'
                },
                {
                    label: '微信',
                    value: 'wechat'
                }
            ],
            // defaultValue:{
            //     label:'',
            //     value:''
            // },
            rules: [
                {
                    required: true,
                    message: '请选择充值方式',
                    trigger: 'change'
                }
            ]
        }
    }
})
const isUp = ref(false)
const onSure = async () => {
    let checkFlag = await formComponentsRef.value.handleValidate()
    console.log(checkFlag)
    if (checkFlag) {
        let res = await formComponentsRef.value.getFormValue()
        console.log(res)
    }
}
// 监听show
watch(() => props.show, async (newVal) => {
    isUp.value = newVal
    if (newVal) {
        console.log('打开')
    } else {
        console.log('关闭')
    }
})

// 监听isUp
watch(isUp, async (newVal) => {
    emits('update:show', newVal)
    if (!newVal) {
        await formComponentsRef?.value?.resetFields()
    }
})
</script>

<template>
    <div>
        <el-dialog title="充值" width="450" append-to-body v-model="isUp">
            <formComponents ref="formComponentsRef" :value="formValue" :formData="formData"></formComponents>
            <template #footer>
                <div class="flex items-center justify-center">
                    <el-button @click="isUp = false">取消</el-button>
                    <el-button type="primary" @click="onSure">确定</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<style scoped lang="scss">

</style>